<template>
  <Modal v-model="drawer.show" :width="80" :mask-closable="false" :styles="styles">
    <span slot="header" :style="titleStyle">{{ $t(`global.create`) }}</span>
    <div slot="footer">
      <Button v-if="drawer.status!=='read'" @click="drawer.show = false">{{ $t(`global.cancel`) }}</Button>
      <Button type="primary" class="ivu-ml" @click="ok">{{$t(`global.save`)}}</Button>
    </div>
    <Form :model="data" :label-width="90" label-position="right" ref="_frm">
      <FieldItem
        v-for="(item,index) in fields"
        :key="index"
        v-model="data[item.key]"
        :config="item.config"
        @create="val => onCreate(val, item)"
        :formItemProps="{label: item.label , prop: item.key, rules: item.rules }"
      />
    </Form>
  </Modal>
</template>

<script>
import {mapActions, mapState} from "vuex";

export default {
  name: "cfgModalHier",
  data() {
    return {
        styles: {top: '50px', maxWidth: '1200px'},
        titleStyle: {},
        bodyStyle: {},
        labelWidth: 120,
        labelPosition: 'right',
        appendOptions: [],
        data: {
            type: 'module',
            name: ''
        }
    }
  },
  methods: {
    // 提交添加或修改数据
    ok() {
      this.$refs._frm.validate(valid => {
        if (valid) {
          this.$emit('submit', this.data);
          this.drawer.show = false
          this.$refs._frm.reset()
          return
        }
      })
    },
    onCreate(val) {
      console.log("file: addModal.vue:50  onCreate", val)
      this.appendOptions.push(val)
    }
  },
  computed: {
    ...mapState('compDesign/config',[
        'modules',  //所有组件配置
    ]),
    typeOptions() {
      let res = []
      let obj = {}

      this.modules.forEach(item => {
        item.type && !obj[item.type] && res.push({label: item.type, value: item.type})
        obj[item.type] = true
      })
      this.appendOptions.forEach(item => {
        item && !obj[item] && res.push({label: item, value: item})
        obj[item] = true
      })
      return res
    },
    fields() {
      return[
        {
          key: 'type',
          label: {"en-US": 'type', "zh-CN": '类型'}[this.G_Locale],
          config: {
            type: 'select',
            options: this.typeOptions,
            filterable: true,
            allowCreate: true,
            clearable: true,
          },
          rules: [{
              required: true,
              trigger: 'blur',
              message: {"en-US": 'type is not empty', "zh-CN": '类型不能为空'}[this.G_Locale]
            },
          ]
        },
        {
          key: 'name',
          label: {"en-US": 'name', "zh-CN": '名称'}[this.G_Locale],
          config: {
            type: 'text',
            clearable: true,
          },
          rules: [{
              required: true,
              trigger: 'blur',
              message: {"en-US": 'name is not empty', "zh-CN": '名称不能为空'}[this.G_Locale]
            },
          ]
        },
      ]
    },
    lang() {
      return {
        "en-US": {
          edit: 'edit',
          new: 'new',
          read: 'read',
          action: 'action',
          submit: 'submit',
          register: 'register',
          sameName: 'same name',
          type: 'type',
          name: 'name',
        },
        "zh-CN": {
          edit: '编辑',
          new: '添加',
          read: '查看',
          action: '操作',
          submit: '提交',
          register: '注册',
          sameName: '名称相同',
          type: '类型',
          name: '名称',
        },
      }[this.G_Locale]
    },
  },
  props: {
    drawer: {
      default: () => {
        return {
          show: false,
        };
      }
    },
    initData: {
      default: () => {
        return {};
      }
    },
  },
  watch: {
    'drawer.show'(val) {
      if (val) {
        this.data = {
            type: 'module',
            name: ''
        }
      }
    },
    initData(val) {
      this.data = val
    },
  },
}
</script>
